// 1. React核心库
import React, { useState, useEffect } from 'react';

// 2. UI组件库 - 按字母顺序
import { Badge, Button, Card, Descriptions, Tag, message } from 'antd';

// 4. 专业组件库
import { PageContainer } from '@ant-design/pro-components';

// 5. 路由和状态管理
import { useParams } from '@umijs/max';

// 7. 项目内部模块
import { apiClients } from '@/services/apiClient';
import { autoLoginInDev } from '@/utils/autoLogin';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { RoleDetail } from '@/services/generated';

const RoleDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<RoleDetail | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        await autoLoginInDev();
        const response = await apiClients.permissions.permissionsRolesRetrieve({ id: parseInt(id!) });
        setData(response.data);
      } catch (error) {
        message.error('获取失败');
      } finally {
        setLoading(false);
      }
    };
    if (id) fetchData();
  }, [id]);

  return (
    <PageContainer title="角色详情" loading={loading}>
      <Card>
        <Descriptions column={2}>
          <Descriptions.Item label="ID">{data?.id}</Descriptions.Item>
          <Descriptions.Item label="角色名称">
            <div>
              {data?.group?.name}
              {data?.is_system && <Tag color="orange" style={{ marginLeft: 8 }}>系统角色</Tag>}
            </div>
          </Descriptions.Item>
          <Descriptions.Item label="角色代码">
            <Tag color="geekblue">{data?.code}</Tag>
          </Descriptions.Item>
          <Descriptions.Item label="角色级别">
            <Badge
              count={Number(data?.level) || 0}
              color={Number(data?.level) <= 2 ? 'red' : Number(data?.level) <= 5 ? 'orange' : 'blue'}
              showZero
            />
          </Descriptions.Item>
          <Descriptions.Item label="权限数量">
            <Badge count={0} color="green" showZero />
          </Descriptions.Item>
          <Descriptions.Item label="用户数量">
            <Badge count={0} color="blue" showZero />
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={data?.status === 'active' ? 'green' : 'red'}>
              {data?.status === 'active' ? '激活' : '禁用'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="描述" span={2}>{data?.description}</Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {data?.created_at ? new Date(data.created_at).toLocaleString('zh-CN') : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {data?.updated_at ? new Date(data.updated_at).toLocaleString('zh-CN') : '-'}
          </Descriptions.Item>
        </Descriptions>
        <div style={{ marginTop: 16 }}>
          <Button type="primary" href={`/permissions/roles/edit/${id}`}>编辑</Button>
          <Button style={{ marginLeft: 8 }} href={`/permissions/role-permissions/${id}`}>权限管理</Button>
          <Button style={{ marginLeft: 8 }} href={`/permissions/role-users/${id}`}>用户管理</Button>
          <Button style={{ marginLeft: 8 }} href="/permissions/roles">返回列表</Button>
        </div>
      </Card>
    </PageContainer>
  );
};

export default RoleDetail;
